﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Customize Table</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 100px;
            text-align: right;
            margin-right: 10px;
        }

        input[type="text"] {
            width: 80px;
        }

        input[type="button"] {
            width: 100px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;

            var sheet = spread.getSheet(0);
            sheet.bind(spreadNS.Events.SelectionChanged, tableName);
            var table = sheet.addTable("table1", 1, 1, 4, 4, spreadNS.TableStyles.light1());

            function tableName() {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                var name = "";
                if (table && table.name) {
                    name = table.name();
                }
                $("#tableName").text(name);
            }

            //add table
            $("#addTable").click(function () {
                var sheet = spread.getActiveSheet();
                try {
                    var cr = sheet.getSelections()[0];
                    if (cr) {
                        cr = getActualRange(cr, sheet.getRowCount(), sheet.getColumnCount());
                        sheet.addTable(getTableName(sheet), cr.row, cr.col, cr.rowCount, cr.colCount, spreadNS.TableStyles.light1());
                    }
                } catch (ex) {
                    alert(!!ex.message ? ex.message : ex);
                }
            });
            //remove table
            $("#removeTable").click(function () {
                var sheet = spread.getActiveSheet();
                try {
                    var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                    if (table) {
                        sheet.removeTable(table);
                    }
                } catch (ex) {
                    alert(!!ex.message ? ex.message : ex);
                }
            });
            //move table
            $("#moveTable").click(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    try {
                        var row = parseInt($("#moveRow").val());
                        var col = parseInt($("#moveColumn").val());
                        if (!isNaN(row) && !isNaN(col)) {
                            sheet.moveTable(table, row, col);
                            tableName();
                        }
                    } catch (ex) {
                        alert(!!ex.message ? ex.message : ex);
                    }
                }
            });
            //resize table
            $("#resizeTable").click(function () {
                var sheet = spread.getActiveSheet();
                var table = sheet.findTable(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
                if (table) {
                    try {
                        var row = parseInt($("#resizeRow").val());
                        var col = parseInt($("#resizeColumn").val());
                        if (!isNaN(row) && !isNaN(col)) {
                            sheet.resizeTable(table, row, col);
                            tableName();
                        }
                    } catch (ex) {
                        alert(!!ex.message ? ex.message : ex);
                    }
                }
            });

            function getTableName(sheet) {
                var i = 0;
                while (true) {
                    var name = "table" + i.toString();
                    if (!sheet.findTableByName(name)) {
                        return name;
                    }
                    i++;
                }
            }
            function getActualRange(range, maxRowCount, maxColCount) {
                var row = range.row < 0 ? 0 : range.row;
                var col = range.col < 0 ? 0 : range.col;
                var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
                var colCount = range.colCount < 0 ? maxColCount : range.colCount;

                return new spreadNS.Range(row, col, rowCount, colCount);
            }
        }
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:360px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <input type="button" id="removeTable" value="Remove table"/>
            <input type="button" id="addTable" value="Add table" style="margin-left:12px;" />
            <label id="tableName"></label>
        </div>
        <div class="option-row">
            <input type="button" id="moveTable" value="Move table"/>
            <label for="moveRow">Row:</label>
            <input type="text" id="moveRow"/>
            <label for="moveColumn">Column:</label>
            <input type="text" id="moveColumn"/>
        </div>
        <div class="option-row">
            <input type="button" id="resizeTable" value="Resize table" />
            <label for="resizeRow">Row count:</label>
            <input type="text" id="resizeRow"/>
            <label for="resizeColumn">Column count:</label>
            <input type="text" id="resizeColumn"/>
        </div>
    </div>
</div>
</body>
</html>
